<template>
  <div class="device_info">
    <div class="title">
      <span>设备信息</span>
      <img src="../../images/cope.png" alt="" @click.stop="open" />
    </div>
    <div class="charts">
      <div class="top_echarts">
        <div class="top_content">
          <div class="total">{{ count }}</div>
          <div class="desc_one">设备总数</div>
          <div class="desc_two">
            同比去年<span
              :style="{
                color: growthOrDecline > 0 ? '#37E8FB' : 'red'
              }"
              >{{
                growthOrDecline > 0 ? "+" + growthOrDecline : growthOrDecline
              }}</span
            >
          </div>
          <img
            class="posi_one_img"
            :src="growthOrDecline > 0 ? growthImg : declineImg"
            alt=""
          />
        </div>
        <div id="echarts_one"></div>
      </div>
      <div class="bottom_echarts">
        <div class="top_content">
          <div class="total">{{ currentMonth }}</div>
          <div class="desc_one">{{ months }}月增加</div>
          <div class="desc_two">
            环比上月<span
              :style="{
                color: growthOrDecline_one > 0 ? '#37E8FB' : 'red'
              }"
              >{{
                growthOrDecline_one > 0
                  ? "+" + growthOrDecline_one
                  : growthOrDecline_one
              }}</span
            >
          </div>
          <img
            class="posi_one_img"
            :src="growthOrDecline_one > 0 ? growthImg : declineImg"
            alt=""
          />
        </div>
        <div id="echarts_two"></div>
      </div>
    </div>
    <!-- 放大弹窗 -->
    <div class="tanchuang" v-show="isMask">
      <div class="title">
        <span>设备信息</span>
        <div class="el-icon-circle-close" @click.stop="open"></div>
      </div>
      <div class="charts">
        <div class="top_echarts">
          <div class="zhezhao"></div>
          <div class="top_content">
            <div class="total">{{ count }}</div>
            <div class="desc_one">设备总数</div>
            <div class="desc_two">
              同比去年<span
                :style="{
                  color: growthOrDecline > 0 ? '#37E8FB' : 'red'
                }"
                >{{
                  growthOrDecline > 0 ? "+" + growthOrDecline : growthOrDecline
                }}</span
              >
            </div>
            <img
              class="posi_one_img"
              :src="growthOrDecline > 0 ? growthImg : declineImg"
              alt=""
            />
          </div>
          <div id="echarts_one_cope"></div>
        </div>
        <div class="bottom_echarts">
          <div class="top_content">
            <div class="total">{{ currentMonth }}</div>
            <div class="desc_one">{{ months }}月增加</div>
            <div class="desc_two">
              环比上月<span
                :style="{
                  color: growthOrDecline_one > 0 ? '#37E8FB' : 'red'
                }"
                >{{
                  growthOrDecline_one > 0
                    ? "+" + growthOrDecline_one
                    : growthOrDecline_one
                }}</span
              >
            </div>
            <img
              class="posi_one_img"
              :src="growthOrDecline_one > 0 ? growthImg : declineImg"
              alt=""
            />
          </div>
          <div id="echarts_two_cope"></div>
        </div>
        <div class="status_num">
          <div>
            <span style="background-color: #00DE00;"></span>在线状态：{{
              onlineNum
            }}台
          </div>
          <div>
            <span style="background-color: #C1C1C1;"></span>离线状态：{{
              offlineNum
            }}台
          </div>
          <div>
            <span style="background-color: #FF0000;"></span>未激活状态：{{
              notactiveNum
            }}台
          </div>
          <div>
            <span style="background-color: #00A5FF;"></span>激活状态：{{
              activationNum
            }}台
          </div>
        </div>
      </div>
    </div>
    <div class="mask" v-show="isMask"></div>
    <!-- 放大弹窗 -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  equipmentMonthlyStatistics,
  annualIncreaseStatistics,
  modelStatistics,
  stateStatistics
} from "@/base/api/DataScreen.ts";
export default {
  data() {
    return {
      growthOrDecline: 0,
      growthOrDecline_one: 0,
      growthImg: require("../../images/436@2x.png"),
      declineImg: require("../../images/459@2x.png"),
      currentMonth: 0, //当前月份
      lastMonth: 0, //上月
      months: 0, //月份
      count: 0, //设备总数
      data_one: [], //按摩椅型号
      data_two: [], //按摩椅数量
      activation: [], // 激活状态
      online: [], // 在线状态
      offline: [], // 离线状态
      notactive: [], // 未激活状态
      modeNameArr: [], // 状态机型
      provinceId: this.provinceId || "", //省份ID
      cityId: this.cityId || "", //城市ID
      name: this.name || "", //城市名称
      isMask: false,
      data_one_copy: [],
      activation_copy: [], // 激活状态
      online_copy: [], // 在线状态
      offline_copy: [], // 离线状态
      notactive_copy: [], // 未激活状态
      modeNameArr_copy: [], // 状态机型
      onlineNum: 0, // 在线状态数量
      offlineNum: 0, // 离线状态数量
      notactiveNum: 0, // 未激活状态数量
      activationNum: 0 //激活状态数量
    };
  },
  props: ["provinceId", "cityId", "name"],
  watch: {
    provinceId(newval) {
      this.provinceId = newval;
    },
    cityId(newval) {
      this.cityId = newval;
    },
    name(newval) {
      if (newval) {
        this.name = newval;
        this.annualIncreaseStatistics();
        this.equipmentMonthlyStatistics();
        this.modelStatistics();
      }
    }
  },
  methods: {
    //复制信息
    cope() {},
    //第一个echarts
    echartsOne() {
      let myChartOne = echarts.init(
        document.getElementById("echarts_one"),
        null,
        { renderer: "svg" }
      );
      // 配置图表
      var option = {
        grid: {
          left: "10%", // 距离容器左侧的距离
          right: "0%", // 距离容器右侧的距离
          top: "15%", // 距离容器顶部的距离
          bottom: "0%", // 距离容器底部的距离
          containLabel: true
        },
        tooltip: {
          trigger: "item"
        },
        xAxis: {
          name: "\n型号",
          nameLocation: "start",
          nameGap: 0,
          data: this.data_one,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10
            }
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          }
        },
        yAxis: {
          name: "数量",
          nameGap: 0,
          nameLocation: "end",
          axisLine: {
            show: false // 隐藏y轴轴线
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right"
          }
        },
        series: [
          {
            type: "bar",
            data: this.data_two,
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              color: "#FFFFFF",
              fontSize: 10
            },
            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function(params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#00C9FF" },
                      { offset: 1, color: "rgba(0,201,255,0)" }
                    ])
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1 // 设置柱子边框宽度为2
              }
            },
            barWidth: "50%" //柱子的宽度
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表
      myChartOne.setOption(option);
    },
    echartsOneCope() {
      let myChartOne = echarts.init(
        document.getElementById("echarts_one_cope"),
        null,
        { renderer: "svg" }
      );
      // 配置图表
      var option = {
        grid: {
          left: "10%", // 距离容器左侧的距离
          right: "0%", // 距离容器右侧的距离
          top: "15%", // 距离容器顶部的距离
          bottom: "0%", // 距离容器底部的距离
          containLabel: true
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 18,
            fontWeight: "bold"
          }
        },
        xAxis: {
          name: "\n型号",
          nameLocation: "start",
          nameGap: 0,
          data: this.data_one_copy,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 14
            }
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 16, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "bottom"
          }
        },
        yAxis: {
          name: "数量",
          nameGap: 0,
          nameLocation: "end",
          axisLine: {
            show: false // 隐藏y轴轴线
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 16, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right"
          }
        },
        series: [
          {
            type: "bar",
            data: this.data_two,
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              color: "#FFFFFF",
              fontSize: 20
            },
            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function(params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#00C9FF" },
                      { offset: 1, color: "rgba(0,201,255,0)" }
                    ])
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1 // 设置柱子边框宽度为2
              }
            },
            barWidth: "50%" //柱子的宽度
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表
      myChartOne.setOption(option);
    },
    open() {
      this.isMask = !this.isMask;
    },
    //堆叠柱状图
    echartsTwo() {
      let myChartTwo = echarts.init(
        document.getElementById("echarts_two"),
        null,
        { renderer: "svg" }
      );
      let option = {
        color: ["#C1C1C1", "#FF0000", "#00A5FF", "#00DE00"],
        tooltip: {
          trigger: "item"
        },
        legend: {
          icon: "circle",
          itemWidth: 4.3,
          itemHeight: 4.3,
          itemGap: 3.5,
          top: -5,
          right: 0,
          textStyle: {
            color: "#FFF",
            fontSize: 7,
            fontWeight: "bold"
          },
          data: ["在线状态", "激活状态", "未激活状态", "离线状态"]
          // formatter:function(params){
          //   console.log(params);
          // },
        },
        grid: {
          left: "10%",
          right: "4%",
          bottom: "3%",
          top: "10%",
          containLabel: true
        },
        yAxis: {
          name: "数量",
          nameGap: -15,
          nameLocation: "end",
          type: "value",
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right"
          },
          axisLine: {
            show: false // 隐藏y轴轴线
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          }
        },
        xAxis: {
          name: "\n型号",
          nameLocation: "start",
          nameGap: 0,
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          },
          type: "category",
          data: this.modeNameArr,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10
            }
          }
        },
        series: [
          {
            name: "离线状态",
            type: "bar",
            stack: "total",
            label: {
              // show: true,
              fontSize: 5
            },
            emphasis: {
              focus: "series"
            },
            symbol: "circle",
            data: this.offline,
            barWidth: 15 // 设置柱状图宽度
          },
          {
            name: "未激活状态",
            type: "bar",
            stack: "total",
            label: {
              // show: true,
              fontSize: 5
            },
            symbol: "circle",
            emphasis: {
              focus: "series"
            },
            data: this.notactive,
            barWidth: 15 // 设置柱状图宽度
          },

          {
            name: "激活状态",
            type: "bar",
            stack: "total",
            label: {
              // show: true,
              fontSize: 5
            },
            symbol: "circle",
            emphasis: {
              focus: "series"
            },
            data: this.activation,
            barWidth: 15 // 设置柱状图宽度
          },
          {
            name: "在线状态",
            type: "bar",
            stack: "total",
            barWidth: 15, // 设置柱状图宽度
            label: {
              // show: true,
              fontSize: 5
            },
            symbol: "circle",
            emphasis: {
              focus: "series"
            },
            data: this.online
          }
        ]
      };
      myChartTwo.setOption(option);
    },
    echartsTwoCope() {
      let myChartTwo = echarts.init(
        document.getElementById("echarts_two_cope"),
        null,
        { renderer: "svg" }
      );
      let option = {
        color: ["#C1C1C1", "#FF0000", "#00A5FF", "#00DE00"],
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 18,
            fontWeight: "bold"
          }
        },
        legend: {
          icon: "circle",
          itemWidth: 4.3,
          itemHeight: 4.3,
          itemGap: 3.5,
          top: 5,
          right: 0,
          textStyle: {
            color: "#FFF",
            fontSize: 14,
            fontWeight: "bold"
          },
          data: ["在线状态", "激活状态", "未激活状态", "离线状态"]
          // formatter:function(params){
          //   console.log(params);
          // },
        },
        grid: {
          left: "10%",
          right: "4%",
          bottom: "3%",
          top: "10%",
          containLabel: true
        },
        yAxis: {
          name: "数量",
          nameGap: -15,
          nameLocation: "end",
          type: "value",
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 16, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right"
          },
          axisLine: {
            show: false // 隐藏y轴轴线
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          }
        },
        xAxis: {
          name: "\n型号",
          nameLocation: "start",
          nameGap: 0,
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 16, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          },
          type: "category",
          data: this.modeNameArr_copy,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 14
            }
          }
        },
        series: [
          {
            name: "离线状态",
            type: "bar",
            stack: "total",
            label: {
              // show: true,
              fontSize: 10
            },
            emphasis: {
              focus: "series"
            },
            symbol: "circle",
            data: this.offline_copy,
            barWidth: 30 // 设置柱状图宽度
          },
          {
            name: "未激活状态",
            type: "bar",
            stack: "total",
            label: {
              // show: true,
              fontSize: 10
            },
            symbol: "circle",
            emphasis: {
              focus: "series"
            },
            data: this.notactive_copy,
            barWidth: 30 // 设置柱状图宽度
          },

          {
            name: "激活状态",
            type: "bar",
            stack: "total",
            label: {
              // show: true,
              fontSize: 10
            },
            symbol: "circle",
            emphasis: {
              focus: "series"
            },
            data: this.activation_copy,
            barWidth: 30 // 设置柱状图宽度
          },
          {
            name: "在线状态",
            type: "bar",
            stack: "total",
            barWidth: 30, // 设置柱状图宽度
            label: {
              // show: true,
              fontSize: 10
            },
            symbol: "circle",
            emphasis: {
              focus: "series"
            },
            data: this.online_copy
          }
        ]
      };
      myChartTwo.setOption(option);
    },
    // 设备月份统计
    equipmentMonthlyStatistics() {
      equipmentMonthlyStatistics(this.provinceId, this.cityId).then(res => {
        this.currentMonth = 0;
        this.growthOrDecline_one = 0;
        this.months = 0;
        // console.log(res,'-----------月份统计');
        res.data.forEach(item => {
          this.currentMonth = item.currentmonth
            .toString()
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
          this.growthOrDecline_one = item.currentmonth - item.lastmonth;
          this.months = item.months;
          if (this.growthOrDecline_one > 0)
            this.growthOrDecline_one = this.growthOrDecline_one;
        });
      });
    },
    //设备总数及同比增加
    annualIncreaseStatistics() {
      annualIncreaseStatistics(this.provinceId, this.cityId).then(res => {
        // console.log(res, "--------------设备总数");
        this.growthOrDecline = 0;
        this.count = 0;
        res.data.forEach(item => {
          this.growthOrDecline = item.compare;
          this.count = item.count
            .toString()
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        });
        // console.log(this.count, "dsakad");
      });
    },
    //按摩椅的数量型号
    modelStatistics() {
      modelStatistics(this.provinceId, this.cityId).then(res => {
        // console.log(res, "------------型号数量");
        this.data_one = [];
        this.data_two = [];
        this.data_one_copy = [];
        res.data.forEach((item, index) => {
          if (item.modelName == "SL-A100S") {
            item.modelName = "A100S";
          }
          if (index <= 6) {
            this.data_one.push(item.modelName);
          }

          this.data_one_copy.push(item.modelName);

          this.data_two.push(item.count);
        });
        this.echartsOne();
        this.echartsOneCope();
      });
    },
    // 按摩椅状态
    stateStatistics() {
      stateStatistics().then(res => {
        this.activation = [];
        this.online = [];
        this.offline = [];
        this.modeNameArr = [];
        this.notactive = [];
        this.activation_copy = [];
        this.online_copy = [];
        this.notactive_copy = [];
        this.modeNameArr_copy = [];
        this.activationNum = 0;
        this.notactiveNum = 0;
        this.onlineNum = 0;
        this.offlineNum = 0;
        res.data.forEach((item, index) => {
          if (item.modelName == "SL-A100S") {
            item.modelName = "A100S";
          }
          if (index <= 6) {
            this.activation.push(item.activation);
            this.online.push(item.online);
            this.offline.push(item.offline);
            this.modeNameArr.push(item.modelName);
            this.notactive.push(item.notactive);
          }

          this.activation_copy.push(item.activation);
          this.online_copy.push(item.online);
          this.offline_copy.push(item.offline);
          this.notactive_copy.push(item.notactive);
          this.modeNameArr_copy.push(item.modelName);

          // 四个状态总数量和
          this.activationNum += item.activation;
          this.notactiveNum += item.notactive;
          this.offlineNum += item.offline;
          this.onlineNum += item.online;
        });
        this.echartsTwo();
        this.echartsTwoCope();
      });
    }
  },
  mounted() {
    this.modelStatistics();
    this.stateStatistics();
    this.equipmentMonthlyStatistics();
    this.annualIncreaseStatistics();
  }
};
</script>

<style lang="less" scoped>
.device_info {
  width: 439px;
  height: 322px;
  // background: #0A2047;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid #3c5d9e;
  .title {
    width: 439px;
    height: 46px;
    background: url(../../images/Group3533@2x.png) no-repeat;
    background-size: cover;
    display: flex;
    padding: 0 14px 0 21px;
    justify-content: space-between;
    align-items: center;
    img {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    span {
      width: 80px;
      height: 29px;
      font-size: 20px;
      font-weight: 500;
      color: #ffffff;
      line-height: 29px;
    }
  }
  .charts {
    .top_echarts {
      padding-left: 19.5px;
      padding-top: 15.5px;
      width: 100%;
      display: flex;
      .top_content {
        position: relative;
        width: 124px;
        height: 119px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .total {
          margin-top: 8px;
          // width: 91px;
          height: 45px;
          font-size: 37px;
          font-weight: bold;
          color: #37e8fb;
          text-align: center;
        }
        .desc_one {
          width: 64px;
          height: 20px;
          font-size: 16px;
          font-weight: 400;
          color: #ffffff;
          line-height: 20px;
          margin-top: 8px;
        }
        .desc_two {
          width: 120px;
          height: 20px;
          font-size: 16px;
          font-weight: 400;
          color: #ffffff;
          line-height: 20px;
          margin-top: 8px;
        }
        .posi_one_img {
          position: absolute;
          width: 10px;
          height: 10px;
          right: 0;
          top: 20px;
        }
      }
      #echarts_one {
        width: 260px;
        height: 120px;
        margin-left: 23px;
      }
    }
    .bottom_echarts {
      padding-left: 12.5px;
      padding-top: 15.5px;
      display: flex;
      .top_content {
        position: relative;
        width: 124px;
        height: 119px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .total {
          margin-top: 8px;
          width: 91px;
          height: 45px;
          font-size: 37px;
          font-weight: bold;
          text-align: center;
          color: #37e8fb;
        }
        .desc_one {
          width: 70px;
          height: 20px;
          font-size: 16px;
          font-weight: 400;
          color: #ffffff;
          line-height: 20px;
          margin-top: 8px;
        }
        .desc_two {
          width: 110px;
          height: 20px;
          font-size: 16px;
          font-weight: 400;
          color: #ffffff;
          line-height: 20px;
          margin-top: 8px;
        }
        .posi_one_img {
          position: absolute;
          width: 10px;
          height: 10px;
          right: 0;
          top: 20px;
        }
      }
      #echarts_two {
        width: 270px;
        height: 120px;
        margin-left: 26px;
      }
    }
  }

  .mask {
    position: fixed;
    z-index: 99999998;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .tanchuang {
    position: fixed;
    z-index: 99999999;
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    background-color: #0a1632;
    .title {
      width: 100%;
      height: 46px;
      background: url(../../images/Group3533@2x.png) no-repeat;
      background-size: cover;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        display: inline-block;
        cursor: pointer;
        width: 24px;
        height: 24px;
        font-size: 24px;
        font-weight: 500;
        color: #ffffff;
      }
      span {
        width: 80px;
        height: 29px;
        font-size: 20px;
        font-weight: 500;
        color: #ffffff;
        line-height: 29px;
      }
    }
    .charts {
      width: 100%;
      height: 93%;
      overflow-x: auto;
      overflow-y: hidden;
      .top_echarts {
        .zhezhao {
          position: absolute;
          left: 0;
          top: 46px;
          width: 270px;
          z-index: 2;
          height: calc(100% - 46px);
          background-color: #0a1632;
        }
        padding-left: 19.5px;
        padding-top: 15.5px;
        width: 100%;
        display: flex;
        .top_content {
          z-index: 3;
          transform-origin: top left;
          transform: scale(2);
          position: absolute;
          left: 20px;
          // top: 0;
          width: 124px;
          height: 119px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .total {
            margin-top: 16px;
            // width: 91px;
            height: 45px;
            font-size: 37px;
            font-weight: bold;
            color: #37e8fb;
            text-align: center;
          }
          .desc_one {
            width: 64px;
            height: 20px;
            font-size: 16px;
            font-weight: 400;
            color: #ffffff;
            line-height: 20px;
            margin-top: 8px;
          }
          .desc_two {
            width: 120px;
            height: 20px;
            font-size: 16px;
            font-weight: 400;
            color: #ffffff;
            line-height: 20px;
            margin-top: 8px;
          }
          .posi_one_img {
            position: absolute;
            width: 10px;
            height: 10px;
            right: 0;
            top: 10px;
          }
        }
        #echarts_one_cope {
          width: 3000px;
          height: 300px;
          margin-left: 70px;
        }
      }
      .bottom_echarts {
        padding-left: 12.5px;
        padding-top: 15.5px;
        display: flex;

        .top_content {
          transform-origin: top left;
          z-index: 3;
          transform: scale(2);
          position: absolute;
          left: 10px;
          width: 124px;
          height: 119px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .total {
            margin-top: 16px;
            width: 91px;
            height: 45px;
            font-size: 37px;
            font-weight: bold;
            text-align: center;
            color: #37e8fb;
          }
          .desc_one {
            width: 70px;
            height: 20px;
            font-size: 16px;
            font-weight: 400;
            color: #ffffff;
            line-height: 20px;
            margin-top: 8px;
          }
          .desc_two {
            width: 110px;
            height: 20px;
            font-size: 16px;
            font-weight: 400;
            color: #ffffff;
            line-height: 20px;
            margin-top: 8px;
          }
          .posi_one_img {
            position: absolute;
            width: 10px;
            height: 10px;
            right: 0;
            top: 20px;
          }
        }
        #echarts_two_cope {
          width: 3000px;
          height: 300px;
          margin-left: 70px;
        }
      }
      .status_num {
        display: flex;
        color: white;
        font-size: 16px;
        margin-left: 400px;
        margin-top: 15px;
        div {
          margin-right: 10px;
          display: flex;
          align-items: center;
          span {
            width: 8px;
            height: 8px;
            border-radius: 4px;
            margin-right: 16px;
          }
        }
      }
    }
  }
}
</style>
